<template>
	<div>
		<el-card class="layout-table-card" shadow="never">
			<el-table :data="state.tableList" v-loading="state.loading" style="width: 100%">
				<el-table-column prop="name" label="场景名称" show-overflow-tooltip></el-table-column>
				<el-table-column prop="scene" label="场景标识" show-overflow-tooltip></el-table-column>
				<el-table-column label="消息类型">
					<template #default="{ row }">
						<el-tag type="success" v-if="row.is_captcha">验证码</el-tag>
						<el-tag type="primary" v-else>消息通知</el-tag>
					</template>
				</el-table-column>
				<el-table-column label="站内信">
					<template #default="{ row }">
						<el-switch
							v-if="row.is_system !== 0"
							:active-value="1"
							:inactive-value="2"
							v-model="row.is_system"
							:value="row.is_system"
							@change="changeSwitch($event, row.id, 'system')"
							size="large"
							:disabled="row.is_system == 0"
						>
						</el-switch>
						<div v-else>-</div>
					</template>
				</el-table-column>

				<el-table-column label="短信">
					<template #default="{ row }">
						<el-switch
							v-if="row.is_sms !== 0"
							:active-value="1"
							:inactive-value="2"
							v-model="row.is_sms"
							:value="row.is_sms"
							@change="changeSwitch($event, row.id, 'sms')"
							size="large"
							:disabled="row.is_sms == 0"
						>
						</el-switch>
						<div v-else>-</div>
					</template>
				</el-table-column>
				<el-table-column label="邮件">
					<template #default="{ row }">
						<el-switch
							v-if="row.is_mail !== 0"
							:active-value="1"
							:inactive-value="2"
							v-model="row.is_mail"
							:value="row.is_mail"
							@change="changeSwitch($event, row.id, 'mail')"
							size="large"
							:disabled="row.is_mail == 0"
						>
						</el-switch>
						<div v-else>-</div>
					</template>
				</el-table-column>
				<el-table-column label="公众号模板">
					<template #default="{ row }">
						<el-switch
							v-if="row.is_wechat !== 0"
							:active-value="1"
							:inactive-value="2"
							v-model="row.is_wechat"
							:value="row.is_wechat"
							@change="changeSwitch($event, row.id, 'wechat')"
							size="large"
							:disabled="row.is_wechat == 0"
						>
						</el-switch>
						<div v-else>-</div>
					</template>
				</el-table-column>
				<el-table-column label="小程序订阅">
					<template #default="{ row }">
						<el-switch
							v-if="row.is_applet !== 0"
							:active-value="1"
							:inactive-value="2"
							v-model="row.is_applet"
							:value="row.is_applet"
							@change="changeSwitch($event, row.id, 'applet')"
							size="large"
							:disabled="row.is_applet == 0"
						>
						</el-switch>
						<div v-else>-</div>
					</template>
				</el-table-column>
				<el-table-column label="操作" width="100" fixed="right">
					<template #default="{ row }">
						<el-button v-auth="'setting/notice/edit'" size="small" text type="primary">
							<router-link :to="{ path: '/setting/message_template/edit', query: { id: row.id } }"> 编辑 </router-link>
						</el-button>
					</template>
				</el-table-column>
			</el-table>
		</el-card>
	</div>
</template>

<script setup lang="ts" name="templateSysList">
import { reactive, onMounted } from 'vue';
import { noticeLists, noticeChange } from '/@/api/setting/notice';
import { messageSuccess } from '/@/utils/message';

// 定义列表
const state = reactive({
	loading: false,
	tableList: [],
	queryParams: {
		is_setting: 1,
		type: 2,
	},
});

// 切换状态
const changeSwitch = async (event, id: number, type: string) => {
	await noticeChange({ identify: type, id: id, status: event });
	messageSuccess('设置成功');
	getTableList();
};

// 获取配置列表
const getTableList = async () => {
	let res = await noticeLists(state.queryParams);
	state.tableList = res;
	state.loading = false;
};

// 页面加载时
onMounted(() => {
	getTableList();
});
</script>

<style scoped lang="scss"></style>
